<template>
<div id="login">
<div class="logo"><img src="../assets/logo0.png"/></div>
  <div class="login_ctn">
    <div class="img_box fl"><img src="../assets/loginImg.png"/></div>
    <el-form :model="loginForm" :rules="loginRules" class="fl">
        <h1>系统登陆</h1>
        <el-form-item prop="username">
            <el-input name="username" v-model="loginForm.username" placeholder="请输入用户名" auto-complete="on">
            </el-input>
        </el-form-item>
            <el-form-item prop="password">
                <el-input name="password" type="password" v-model="loginForm.password" placeholder="请输入密码" auto-complete="on">
                </el-input>
            </el-form-item>
          <!--   <p style="position: relative; text-align:left; margin-left:32px; margin-top:20px;">
                                 <span class="s_logo fa fa-unlock-alt"></span>
                                 <input v-model="loginForm.code" class="ipt " style="width: 50px" type="text" name="ValidateCode" id="ValidateCode" />
                                 <img id="codeImg" alt="刷新验证码！" style="margin-bottom: -12px; cursor: pointer;" src="http://115.233.209.175:8090/Core/verify_code.ashx" onclick="this.src=this.src+'?'" />
                             </p> -->
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
    </el-form>
<div class="clr"></div>
  </div>
</div>
</template>
<script>
import axios from "axios";
import qs from "qs";
//import global_ from "./Global"
export default {
  name: "login2",
  data() {
    return {
      loginUrl: this.GLOBAL.loginUrl,
      loginForm: {
        username: "",
        password: ""
        //code:""
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  mounted() {
    var m = this;
    m.getCookie();
    // m.loginUrl=this.GLOBAL.loginUrl //global_.loginUrl;
  },
  methods: {
    login: function() {
      var self = this;
      let postData = this.$qs.stringify({
        UserName: self.loginForm.username,
        Password: self.loginForm.password
        //  Code: self.loginForm.code,
      });
      this.$axios({
        method: "post",
        url: this.GLOBAL.loginUrl, //self.loginUrl,//"http://115.233.209.175:8090/Account/Loginface",
        data: postData
      }).then(res => {
        console.log(res);
       this.$cookies.set("status", "logined", 60 * 3); // 设置cookie中存放的生命周期
        this.$cookies.set("userid", res.data.message, 60 * 3); // 设置cookie中存放的生命周期
        this.setCookie(self.loginForm.username, self.loginForm.password, 1);
        let redirect = decodeURIComponent(
          this.$route.query.redirect || "/home"
        );
        this.$router.push({
          path: redirect,
          name: "home",
          params: { userId: res.data.message }
        });
    
        
        // this.$router.push("/index")
      });
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.loginForm.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.loginForm.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  }
};
</script>
<style scoped>
.el-input {
  width: 240px;
}
#login {
  width: 100%;
  height: 100%;
   background-color: #005ce5;
  min-width: 1200px;
}
.login_ctn{
  position: absolute;
  top:300px;
  width: 1200px;
  text-align: center;
  margin:auto 20%;
}
#login form {
  background-color: #fff;
  width: 280px;
  height: 300px;
  margin-top: 50px;
}
#login form h1 {
  text-align: center;
  margin: auto;
  margin: 25px 0;
}
.el-input {
  margin: 0 20px;
}
#login form button {
  display: block;
  text-align: center;
  margin: auto;
  width: 240px;
}
#login .logo {
  margin-left: 20px;
  padding-top: 10px;
}
#login .img_box{
 margin-right: 10px;
}

@media screen and (min-width:1200px) and (max-width:1600px){
  .login_ctn{
    margin: auto 10%;
  }
}
@media screen and  (max-width:1199px){
  .login_ctn{
    margin: auto 0%;
  }
}
</style>
